<template>
  <div>
    <p>{{fruit}}</p>
    <button @click="fruit.price++">涨价</button>
    <button @click="fruit.name='榴莲'">换个吃</button>
    <hr>
    <p>{{fruit.desc}}</p>
    <button @click="fruit.desc.info ='来自齐齐哈尔问候'">改变描述</button>
  </div>
</template>

<script>
import { watch, reactive } from 'vue'
export default {
setup() {
  const fruit = reactive({
    name: '香蕉',
    price: 10,
    desc: {
      info: '来自月球的香蕉'
    }
  })
  // watch(fruit, (newVal) => {
  //   console.log('fruit变了', newVal)
  // })
  // watch(() => fruit.price, (newVal) => {
  //   console.log('fruit 价格变了', newVal)
  // })
  watch(()=> fruit.desc, (newVal) => {
    console.log('描述变了', newVal)
  }, {
    deep: true,
    immediate: true
  })
  return {
    fruit
  }
}
}
</script>

<style>

</style>

